<template>
	<div class="pay-wrap">
		<div class="service-box">
			<img class="img" :src="tuanInfoObj.imgUrl">
			<div class="content">
				<div class="title">{{tuanInfoObj.desc}}</div>
				<div class="price"><span><em class="unit">¥</em><em class="text">{{ tuanInfoObj.groupPrice | toFixedN(2)}}</em></span></div>
				<div class="num"><span><em class="unit">×</em><em class="text">1</em></span></div>
			</div>
		</div>
		<div class="select-list">
			<div class="item">
				<div class="item-left">收券手机号</div>
				<div class="item-right">{{tuanInfoObj.mobile}}</div>
			</div>
			<div class="item item-min">
				<div class="item-left">购买成功后将发送抵扣券到此车享账号</div>
			</div>
		</div>
		<div class="select-list">
			<div class="item">
				<div class="item-left">付款方式</div>
				<div class="item-right">在线支付</div>
			</div>
			<div class="item">
				<div class="item-left">配送</div>
				<div class="item-right">自提（电子兑换券）</div>
			</div>
		</div>
		<div class="pay-box">
			<div class="price-box">
				<span class="desc">总计：</span><span class="price"><em class="unit">¥</em><em class="text">{{ tuanInfoObj.groupPrice | toFixedN(2) }}</em></span>
			</div>
			<div class="pay-btn" ca="拼团_确认订单$立即支付" @click="payAction">
				立即支付
			</div>
		</div>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	import Url from 'url';
	import QueryString from 'query-string';
	import {Toast, MessageBox} from 'mint-ui';
	//import shareImg from "../../../static/image/shareimg.png";
	export default{
		data (){
			return {
				prizeCode: '',
				groupId: '',
				tuanInfoObj: {
					groupPrice: 0
				}
			};
		},
		components: {
			
		},
		created (){
			var _this = this;
			//初始化
			_this.init();
		},
		mounted (){
			var _this = this;
			//打点
    		_this.$nextTick(function () {
    			common.ANA_AnalyticsScan();
    		});
		},
		filters: {
			
		},  
		methods: {
			//页面初始化
			init: function () {
				var _this = this;
				var hrefUrl = window.location.href;
		    	var urlObj = Url.parse(hrefUrl);
		    	var queryObj = QueryString.parse(urlObj.query);
		    	_this.prizeCode = queryObj.prizeCode;
		    	_this.groupId = queryObj.groupId;
		    	_this.getTuanInfo();
		    	//隐藏分享按钮
		    	_this.isAppGt36();
			},
			//获取团详细信息
			getTuanInfo: function () {
				var _this = this;
				var getTuanInfoUrl = common.isdev() + '/activity/groupbuy/confirmOrder.htm';
				var getTuanInfoParams = {
					prizeCode: _this.prizeCode
				};
				_this.$http.post(getTuanInfoUrl, getTuanInfoParams).then(function (res) {
					var data = res.data;
					_this.tuanInfoObj = data.obj;
					console.log(data);
				}, function () {
					Toast('系统繁忙，请稍后再试');
				});
			},
			//支付
			payAction: function() {
				var _this = this;
				//初始化订单
				var initOrderUrl= common.isdev() + '/activity/groupbuy/order/createOrder.htm';
				//测试prizeCode AGBUYPRIZE01
				var initOrderParams={
					prizeCode: _this.prizeCode,
					groupId: _this.groupId

				};
				_this.$http.post(initOrderUrl, initOrderParams).then(function (res) {
					var data = res.data;
					var payUrl = data.returnUrl;
					var msgCode = data.errorCode;
					var msgObj = {
						'1006':'下单失败',
						'1010':'开团失败',
						'1011':'参团失败',
						'1012':'活动不存在',
						'1013':'团信息不存在',
						'1014':'团员已满',
						'1015':'团不在进行状态',
						'1016':'新用户团，不可参与',
						'1017':'用户已参团',
						'1018':'存在进行中的团',
						'1019':'此商品每位用户限购'+data.obj+'件，不可超额购买哦'
					}
					console.log(data);
					//成功
					if(data.result == 1){
						//订单初始化后唤起支付页面
						var payUrl=common.isdev() + payUrl;
						window.location.href = payUrl;
					} else if (data.result == -99)  {
						common.goLogin();
					} else  {
						if (msgObj.hasOwnProperty(msgCode)) {
							var msg = msgObj[msgCode];
							Toast(msg);
						} else {
							Toast('系统繁忙，请稍后再试');
						}
					}
				}, function (res) {
					Toast('系统繁忙，请稍后再试');
				});
			},
			//隐藏分享按钮
			isAppGt36:function(){
				
				if (common.isApp() && common.checkAppversionIsGt35()) {
					lb.hideMenu();
				}
			},
		}
	}
</script>

<style lang="scss">
	@import "../../../assets/css/reset.scss";
	@import "../../../assets/css/common.scss";
	html, body {
		height: 100%;
		background: #f6f7f7;
	}
	.pay-wrap {
		.service-box {
			position: relative;
			padding: 1.5rem;
			background: #ffffff;
			.img {
				position: absolute;
				top: 1.5rem;
				left: 1.5rem;
				display: block;
				width: 12rem;
				height: 8rem;
				background: #f0f5fb;
			}
			.content {
				position: relative;
				height: 8rem;
				margin-left: 12rem;
				padding-left: 0.8rem;
				.title {
					height: 3.6rem;
					font-size: 1.5rem;
					line-height: 1.85rem;
					color:#000000;
					overflow: hidden;
				}
				.price {
					position: absolute;
					left: 0.8rem;
					bottom: 0;
					font-size: 1.5rem;
					color:#000000;
				}
				.num {
					position: absolute;
					right: 0;
					bottom: 0;
					font-size: 1.3rem;
					color:#999999;
				}
			}
		}
		.select-list {
			margin-top: 0.8rem;
			padding-left: 1.5rem;
			background: #ffffff;
			.item {
				display: -webkit-flex;
				display: flex;
				justify-content: space-between;
				align-items: center;
				display: -webkit-box;
				-webkit-box-orient: horizontal;
				-webkit-box-pack: justify;
				border-top: 1px solid #e7e7e7;
				padding:1.5rem 1.5rem 1.5rem 0;
				font-size: 1.5rem;
				&:nth-of-type(1) {
					border-top: 0;
				}
				.item-left {
					color:#999999;
				}
				.item-right {
					color:#333333;
				}
			}
			.item-min {
				font-size: 1.3rem;
				padding: 1rem 1.5rem 1rem 0;
			}
		}
		.pay-box {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			background: #ffffff;
			box-shadow:0 0 20px rgba(204, 204, 204, .7);  
			.price-box {
				height: 6rem;
				line-height: 6rem;
				padding-left: 1.4rem;
				padding-right: 19rem;
				font-size: 1.7rem;
				.desc {
					color:#000000;
				}
				.price {
					color:#ff6600;
				}
			}
			.pay-btn {
				position: absolute;
				top: 0.8rem;
				right: 1rem;
				width: 17rem;
				height: 4.4rem;
				line-height: 4.4rem;
				border-radius: 0.4rem;
				background:#ff6600;
				text-align: center;
				font-size: 1.7rem;
				color: #ffffff;
			}
		}
	}
	.ellipsis {
		white-space: nowrap;  
        overflow: hidden;  
        text-overflow: ellipsis;  
	}
	.ellipsis2 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
</style>
